<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="text" id="message">
<button id="sendButton">发送</button>
<div>

</div>

    <script>
        let websocketUrl = 'ws://'+ location.host +'/socket';
        let webSocket = new WebSocket(websocketUrl)

        let div = document.querySelector("div");


        webSocket.onopen = function() {
            console.log("连接建立!");
        }

        webSocket.onclose = function () {
            console.log("连接断开");
        }

        webSocket.onerror = function () {
            console.log("连接异常!");
        }

        webSocket.onmessage = function (e) {
            console.log("receive:" + e.data);
            div.innerHTML = "Response:" + e.data;
        }

        let messageInput = document.querySelector("#message");
        let sendButton = document.querySelector("#sendButton");

        sendButton.onclick = function () {
            console.log("send" + messageInput.value);
            webSocket.send(messageInput.value);
        }


    </script>
</body>
</html>